<script setup lang="ts">
import type { Settings } from './types';

import { onMounted, ref } from 'vue';

import { message, Skeleton } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { getSettingSite, putSettingSite } from '#/api/admin/setting';

import { defaultSettings, updateSettings } from './hook';

const loading = ref<boolean>(true);
const form = ref<Settings>(defaultSettings);
async function onSubmit(values: Record<string, any>) {
  const { msg } = await putSettingSite(updateSettings(form.value, values));
  message.success(msg);
}

const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  schema: [
    {
      component: 'Select',
      componentProps: {
        allowClear: false,
        options: [
          {
            label: '是',
            value: '1',
          },
          {
            label: '否',
            value: '0',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'open_registration',
      label: '用户注册验证',
    },
  ],
});

const onInfo = async () => {
  const { data } = await getSettingSite();
  if (data.site_info) {
    form.value.options = data.site_info;
  }
  if (data.cdn_settings) {
    form.value.cdn_settings = data.cdn_settings;
  }

  if (data.cmf_settings) {
    form.value.cmf_settings = data.cmf_settings;
    formApi.setValues(data.cmf_settings);
  }
  loading.value = false;
};

onMounted(async () => {
  await onInfo();
});
</script>

<template>
  <Skeleton :loading="loading">
    <Form />
  </Skeleton>
</template>
